<template>
  <div class="recommend">
    <div class="top">
      <div>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-downloadfill"></use>
        </svg>
      </div>
      <div>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-shuanglieliebiao"></use>
        </svg>
      </div>
      <div><label>日期筛选</label></div>
    </div>
    <div class="content">
      <div @click="onMusicList(s)" class="song-sheet"
           v-for="s in songSheetList"
           :key="s.id">
        <SongSheet
            :title="s.title"
            :user="s.user"
            :img="s.img"
        ></SongSheet>
      </div>
    </div>
  </div>
</template>

<script>
import SongSheet from './SongSheet'
import {onMounted} from 'vue'
import {useStore} from 'vuex';
import {useRouter} from "vue-router";

export default {
  name: 'Recommend',
  description: {
    // 推荐
  },
  components: {SongSheet},
  setup(props, context) {
    const router = useRouter();
    const store = useStore();

    let songSheetList = store.state.kugouNet.songSheetListHome;

    function onMusicList(songSheet) {
      //根据歌单id请求歌曲
      songSheet.type = "net"
      router.push({
        name: "songSheet",
        query: {
          ...songSheet
          //songSheet: JSON.stringify(songSheet),
        }
      })
    }

    onMounted(() => {
      if (songSheetList.length < 1) {
        // 请求歌单
        store.dispatch("kugouNet/getSongSheetListNetStore", {type: "home", page: 1, num: 8})
      }
    })

    return {
      songSheetList,
      onMusicList
    }
  }
}
</script>

<style scoped lang="less">
@import url("@/assets/less/1.less");

.recommend {
  width: 656px;
  height: 400px;
  /*background-color: #252D3A;
  border-radius: @theme-radius-icon;*/
  /*border: 1px solid pink;*/

  .top {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    div {
      margin-right: 25px;
      .icon1();

      svg {
        .icon-min(24px, @ffc);
      }
    }

    div:last-child {
      width: 102px;
      border-radius: @theme-radius-icon;
      color: @ffc;
      font-size: 12px;
    }
  }

  .content {
    width: 656px;
    height: 300px;
    /*margin-top: 25px;*/
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    // align-items: flex-start | flex-end | center | baseline | stretch
    align-items: stretch;
    flex-wrap: wrap;
    /*background-color: #ffffff;*/
    /*border: 1px solid #a11a32;*/
    overflow-x: hidden; /*x轴禁止滚动*/
    overflow-y: scroll; /*y轴滚动*/

    /* 定义滚动条样式 */

    &::-webkit-scrollbar {
      //display: none;
      width: 10px; //定义滚动条宽度
      height: 10px; //定义滚动条高度
      /*width: 20px;*/
      border-radius: 10px; //定义滚动条圆角
      background-color: rgba(240, 240, 240, 0.1); //定义滚动条颜色
    }

    /*定义滚动条轨道 内阴影+圆角*/

    &::-webkit-scrollbar-track {
      border-radius: 10px;
      /*滚动条里面轨道*/
      background: @bc;
    }

    /*&::-webkit-scrollbar-track {
      display: none;
      box-shadow: inset 0 0 0px rgba(240, 240, 240, .5); //定义轨道阴影
      border-radius: 10px; //定义轨道圆角
      background-color: rgba(4, 56, 114, .5); //定义轨道颜色
    }*/

    /*定义滑块 内阴影+圆角*/

    &::-webkit-scrollbar-thumb {
      border-radius: 10px; //定义滑块圆角
      box-shadow: inset 0 0 0 rgba(240, 240, 240, .5); //定义滑块阴影
      background-color: @fc //定义滑块颜色
    }

    .song-sheet {
      width: 146px;
      margin-top: 20px;
    }
  }

}

</style>
